<!-- 导入合并查询导出v1.0.0 -->
<template>
    <div class="filter">
        <div class="filter-item">
            <div class="filter-item-field">模糊查询：</div>
            <el-input v-model="filter.keyword" clearable></el-input>
        </div>
    </div>
    <div class="btnRow">
        <importXLSX :beforeUpload="beforeUpload" :onSuccess="onSuccess"></importXLSX>
        <el-button v-if="hasInitail" style="margin-left: 12px;" type="primary" @click="handleSearchClick">查询</el-button>
        <el-button v-if="hasInitail" style="margin-left: 12px;" type="primary" @click="handleClearClick">清除</el-button>
        <el-button v-if="hasInitail" style="margin-left: 12px;" type="primary" @click="handleDeduplicateClick">去重</el-button>
        <el-button v-if="hasInitail" :loading="loading" style="margin-left:16px;" type="primary" @click="handleExportClick">
            导出Excel
        </el-button>
    </div>
    <div id="tableContainer" style="width: 100%; height:800px; margin-top: 16px;"></div>
</template>
<script setup>
import importXLSX from '@/views/component/importXLSX.vue'
import * as VTable from '@visactor/vtable';
import { ElMessage } from 'element-plus'
import { onMounted, shallowRef, ref, computed } from 'vue';
import { exportFile } from '@/utils/export.js';

const option = {
    records: [],
    columns: [],
    widthMode: 'standard',
    dragHeaderMode: 'column', // 列拖动开启
    keyboardOptions: {
        copySelected: true, // 开启拷贝
        selectAllOnCtrlA: true,
    },
    theme: VTable.themes.ARCO.extends({
        dragHeaderSplitLine: {
            lineColor: 'red',
            lineWidth: 2,
            shadowBlockColor: 'rgba(255,0,0,0.3)'
        }
    })
};
const columns = ref([])
const tableInstance = shallowRef()
// 过滤字段
const filter = ref({
    keyword: ''
})
// 导出loading
const loading = ref(false)

const hasInitail = computed(() => {
    return !!tableInstance.value
})

// before钩子函数返回多文件列表
const beforeUpload = (files) => {
    // const isLt1M = files.size / 1024 / 1024 < 1

    // if (isLt1M) {
    //     return true
    // }

    // ElMessage({
    //     message: 'Please do not upload files larger than 1m in size.',
    //     type: 'warning'
    // })
    // return false
    return true;
}

// 成功调用函数
const onSuccess = ({ results, header }) => {
    option.records = [...results, ...option.records]
    columns.value = [...new Set([...columns.value, ...header])]
    option.columns = columns.value .map(item => ({
        "field": item,
        "title": item,
        "width": "auto",
        sort: true,
    }))
    tableInstance.value = new VTable.ListTable(document.getElementById("tableContainer"), option);
    ElMessage({
        message: '生成表格成功',
        type: 'success'
    })
}

// 查询
const handleSearchClick = () => {
    const keyword = filter.value.keyword
    if (keyword) {
        const optionCopy = JSON.parse(JSON.stringify(option))
        optionCopy.records = option.records.filter(item => {
            let hasKeyword = false
            Object.values(item).forEach(i => {
                if (String(i).length >= keyword.length && keyword.indexOf(String(i)) !== -1) {
                    hasKeyword = true
                }
            })
            return hasKeyword
        })
        tableInstance.value = new VTable.ListTable(document.getElementById("tableContainer"), optionCopy);
    } else {
        tableInstance.value = new VTable.ListTable(document.getElementById("tableContainer"), option);
    }
    ElMessage({
        message: '查询成功',
        type: 'success'
    })
}

// 清除
const handleClearClick = () => {
    filter.value.keyword = ''
    option.columns = []
    option.records = []
    tableInstance.value = new VTable.ListTable(document.getElementById("tableContainer"), option);
    ElMessage({
        message: '清除成功',
        type: 'success'
    })
}

// 去重
// 注意 会影响原始数据
const handleDeduplicateClick = () => {
    const newData = [...new Set(option.records.map(item => JSON.stringify(item)))].map(item => JSON.parse(item))
    option.records = newData
    tableInstance.value = new VTable.ListTable(document.getElementById("tableContainer"), option);
    ElMessage({
        message: '去重成功',
        type: 'success'
    })
}

// 导出
const handleExportClick = async () => {
    loading.value = true
    const tHeader = option.columns.map(item => item.field)
    const filterVal = option.columns.map(item => item.field)
    const list = option.records
    await exportFile(tHeader, filterVal, list)
    ElMessage({
        message: '导出成功',
        type: 'success'
    })
    loading.value = false
}

onMounted(() => {

})
</script>

<style scoped lang="scss">
.filter {
    margin-bottom: 16px;
    display: flex;

    &-item {
        display: flex;
        align-items: center;

        &-field {
            text-wrap: nowrap;
        }
    }
}

.btnRow {
    display: flex;
}
</style>